<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>

    <link href="../plugin/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

    <script src="../plugin/echarts/echarts.js"></script>
    <script src="../plugin/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../plugin/soul/utils3.js"></script>
    <script src="../base/base.js"></script>
</head>

<body>

<div style="padding:20px 0;margin-left:20px;display: flex;flex-direction: row;">
    <div class="input-group" style="width: 240px">
        <span class="input-group-addon">开始时间</span>
        <input class="form-control form_datetime" id="startTime">
    </div>
    <span style="line-height: 30px;">&nbsp;一一&nbsp;</span>
    <div class="input-group" style="width: 240px">
        <span class="input-group-addon">结束时间</span>
        <input class="form-control form_datetime" id="endTime">
    </div>
    &nbsp;<button type="button" id="search" class="btn btn-success">搜索</button>
</div>
<div id="ethAmount" style="width:100%;height: 340px;"></div>
<br>
<div id="btcAmount" style="width:100%;height: 340px;"></div>
<script>
    var nowTime = Date.parse(new Date());
    var oldTime = nowTime - 24 * 60 * 60 * 1000 * 10;

    $('#startTime').val(FormatUtil.formatDate(new Date(oldTime)));
    $('#endTime').val(FormatUtil.formatDate(new Date()));


    var ethChart = echarts.init(document.getElementById('ethAmount'));
    var btcChart = echarts.init(document.getElementById('btcAmount'));
    var timedata = [];
    var ethAmount = [];
    var btcAmount = [];
    $.ajax({
        type: "get",
        url: "/report/coin?token=" + BaseConfig.token,
        success: function (res) {
            if (res.code == 200) {
                timedata = res.obj.data;
                console.log(res.obj.coinReportVoList);
                for (var i = 0; i < res.obj.coinReportVoList.length; i++) {
                    ethAmount.push(res.obj.coinReportVoList[i].ethAmount);
                    btcAmount.push(res.obj.coinReportVoList[i].btcAmount);
                }
                ethReport('ETH', timedata, ethAmount);
                btcReport('BTC', timedata, btcAmount);
            }
        },
        error: function (res) {
            SwalUtil.error('请求失败!');
        }
    });
    $(".form_datetime").datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd', //显示格式
        todayHighlight: 1, //今天高亮
        minView: "month", //设置只显示到月份
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        autoclose: 1 //选择后自动关闭
    });

    $('#search').click(function () {
        var startVal = $('#startTime').val();
        var endVal = $('#endTime').val();

        var s = Date.parse(new Date(startVal));
        var e = Date.parse(new Date(endVal));

        if (startVal == "" || endVal == "") {
            SwalUtil.error('时间皆不能为空');
        }
        else if (s >= e) {

            SwalUtil.error('开始时间不能大于等于结束时间');

        } else {
            timedata = [];
            ethAmount = [];
            btcAmount = [];
            $.ajax({
                type: 'get',
                url: '/report/coin?beginDate=' + startVal + '&endDate=' + endVal + '&token=' + BaseConfig.token,
                success: function (res) {
                    if (res.code == 200) {
                        timedata = res.obj.data;
                        console.log(res.obj.coinReportVoList);
                        for (var i = 0; i < res.obj.coinReportVoList.length; i++) {
                            ethAmount.push(res.obj.coinReportVoList[i].ethAmount);
                            btcAmount.push(res.obj.coinReportVoList[i].btcAmount);
                        }
                        ethReport('ETH', timedata, ethAmount);
                        btcReport('BTC', timedata, btcAmount);
                    }
                },
                error: function () {
                    SwalUtil.error('操作异常');
                }
            });
        }

    });


    function ethReport(title, timedata, iconCount) {
        option = {
            title: {
                text: title
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [title]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timedata
            },
            yAxis: {
                type: 'verify'
            },
            series: [{
                name: title,
                type: 'line',
                stack: '总量',
                data: iconCount
            },
            ]
        };
        ethChart.setOption(option);

    }

    function btcReport(title, timedata, iconCount) {
        option = {
            title: {
                text: title,
            },
            tooltip: {
                trigger: 'axis'
            },
            color: ["rgb(20,57,255)"],
            legend: {
                data: [title]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timedata
            },
            yAxis: {
                type: 'verify'
            },
            series: [{
                name: title,
                type: 'line',
                stack: '总量',
                data: iconCount,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#1439ff'
                        }
                    }
                },
            },
            ]
        };
        btcChart.setOption(option);

    }
</script>
</body>

</html>